<html>
<head>
  <title>首页</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script language="javascript" src="/static/js/jquery-3.5.1.min.js"></script>
	<script language="javascript" src="/static/js/import.js"></script>
  <style type="text/css">
  </style>
  <script language="javascript">
	  window.changeNav = function(code){
		  var nodes = $("#menuTree").treeview("getNodes",[code,"code"]);
		  //为触发选择事件，先取消选中，再选中
		  $("#menuTree").treeview("unselectNode",nodes[0]);
		  $("#menuTree").treeview("selectNode",nodes[0]);
	  };
	  window.showUserDetail = function(id){
		  $("#myTab .tab-pane").removeClass("active");
		  $("#userDetailTab").addClass("active");
		  if(id){
			  $("#userDetailPane").attr("src","/user/detail.htmlx?id="+id);
		  }else{
			  $("#userDetailPane").attr("src","/user/detail.htmlx");
		  }
	  };
	  function appendTab(node){
		  if(!node){
			  return;
		  }
		  if(node.type=="系统"&&node.nodes&&node.nodes.length>0){
			  node.nodes.forEach(function (child) {
				  appendTab(child);
			  });
		  }else if(node.type=="模块"){
			  var tab = $('<div class="tab-pane" id="'+node.code+'Tab"></div>');
			  var pane = $('<iframe class="w-100 h-100" id="'+node.code+'Pane"></iframe>');
			  tab.append(pane);
			  $("#myTab").append(tab);
		  }
	  }
	$(function(){
		$.ajax({
			url: "/menu/tree.do",
			type: "post",
			data: {mode:"main"},
			success: function (menuNodes) {
				if(!menuNodes){
					return;
				}
				menuNodes.forEach(function (node) {
					appendTab(node);
				});
				$("#menuTree").treeview({
					data: menuNodes,
					showIcon: false,
					showTags: false,
					selectable: true,
					showBorder: false,
					expandIcon: 'bi bi-caret-down-fill',
					collapseIcon: 'bi bi-caret-right-fill',
					color: "#fff",
					onhoverColor: "#0d6efd",
					backColor: "#212529",
					borderColor: "#212529",
					onNodeSelected: function (event,data) {
						$("#myTab .tab-pane").removeClass("active");
						if(data.uri&&data.uri.endsWith(".htmlx")){
							$("#"+data.code+"Pane").attr("src",data.uri);
						}
						$("#"+data.code+"Tab").addClass("active");
					}
				});
			}
		});

		var user = JSON.parse(localStorage.getItem("user"));
		if(user){
			$("#userName").html(user.name);
		}
		if(user&&user.photo){
			$("#userPhoto").attr("src","/resource/static"+user.photo);
		}
		$("#userInfo").click(function () {
			if(user&&user.id){
				showUserDetail(user.id);
			}
		});
		$("#logout").click(function () {
			localStorage.clear();
			$.removeCookie('token', { path: '/' });
			window.location.href = "/springmvc-demo/main.htmlx";
		});
	});
  </script>
</head>
<body>
	<div class="d-flex h-100">
	  <div class="d-flex flex-column p-3 text-white bg-dark">
		<div class="align-items-center">
		  <span class="bi bi-house-door fs-4"></span>
		  <span class="fs-4">导航</span>
		</div>
		<hr>
		  <div class="flex-fill overflow-y-auto" id="menuTree" ></div>
		<hr>
		<div class="dropdown">
		  <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown">
			<img src="" id="userPhoto" alt="" width="32" height="32" class="rounded-circle me-2">
			<strong id="userName">admin</strong>
		  </a>
		  <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
			<li><a class="dropdown-item" href="#" id="userInfo">信息</a></li>
			<li><a class="dropdown-item" href="#">设置</a></li>
			<li><a class="dropdown-item" href="#">关于</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="#" id="logout">退出</a></li>
		  </ul>
		</div>
	  </div>
  
	  <div class="tab-content flex-fill" id="myTab">
		  <div class="tab-pane" id="userDetailTab">
			  <iframe class="w-100 h-100" id="userDetailPane"></iframe>
		  </div>
	  </div>
  
  </div>
</body>
</html>
